<template>
  <div class="Outerbox1">
  <div class="Outerbox">
  <div class="left">
  <div class="box">
    <div class="share">
      <span class="share.text">分享</span>
    </div>
    <img class="img" src="./images/soda.jpg" alt="">
    <img class="img-tese" src="./images/测试.jpg" alt="">
    <div class="guanli">
      <span class="tex">管理我的主页 ∧</span>
    </div>
    <div class="intor">
      暂无简介
    </div>
  </div>
  <div class="bottom">
    <div class="bottom-left">
      <span class="zero">0</span>
      <span class="attention">关注</span>
    </div>
    <div class="bottom-right">
      <span class="zero">0</span>
      <span class="fans">粉丝</span>
    </div>
  </div>
</div>
<div class="right">
  <div class="right-box">
    <img class="right-img" src="./images/耐克.png" alt="">
  </div>
</div>
</div>
<div class="last">
  <span class="last-text">资源动态</span>
  <span class="last-text">商品服务</span>
</div>
</div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.Outerbox1{
  width: 1200px;
  height: 1420px;
  // background: hotpink;

}
.Outerbox{
  width: 1200px;
  height: 420px;
  // background: blue;
  display: flex;
  margin-top: 10px;
}
.box {
  width: 334px;
  height: 300px;
  background: #f5f7f9;
  border-radius: 4px;
  margin-top: 20px;
  margin-left: 20px;

}
.share {
  cursor: pointer;
  height: 21px;
  text-align: right;
  padding-right: 19px;
  padding-top: 15px;
  color: #7d8090;
  font-size: 14px;
}

.img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 5px 120px;
}

.img-tese {
  width: 100px;
  height: 20px;
  margin: 5px 120px;
}

.guanli {
  width: 120px;
  height: 30px;
  background: #fbe9f2;
  border-radius: 19px;
  margin: 10px 109px;
}

.guanli .tex {
  text-align: center;
  font-size: 14px;
  color: #f93684;
  line-height: 30px;
  padding-left: 14px;
}
.intor {
  font-size: 16px;
  color: #7d8090;
  margin-left: 20px;
}
.bottom {
  background: #f5f7f9;
  margin-top: 10px;
  margin-left: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 334px;
  height: 76px;
  border-radius: 4px;
  padding-top: 16px;
  display:flex;
}
.bottom-left{
  width: 167px;
  height: 38px;
  border-right: 1px solid #7d8090;
}
.bottom-left .zero{
  font-size: 20px;
    margin-bottom: 10px;
    color: #111;
    padding-left: 70px;
}
.bottom .attention{
  display: block;
  padding-left: 60px;
  color: #7d8090;
}
.bottom-right{
  width: 167px;
  height: 38px;
  display:flex;
  flex-direction: column;
}
.bottom-right .zero{
  font-size: 20px;
  display:flex;
  -webkit-box-pack: center;
  justify-content: center;
}
.bottom-right .fans{
  display:flex;
  -webkit-box-pack: center;
  justify-content: center;
  color: #7d8090;
}
.right-box{
  width: 800px;
  height: 386px;
  // background: green;
  border-radius:19px;
  margin-top: 20px;
  margin-left: 20px;
}
.right-img{
  width: 800px;
  height: 386px;
  border-radius:19px;
}
.Outerbox1 .last{
  width: 1200px;
  width: 1200px;
  margin-right: auto;  
  text-align: center;
  color: #7d8090;
}
.last-text {
  padding: 10px 4px;
  margin: 0 20px;
}
.last-text:hover {
  color: #f93684;
  Text-decoration:Underline;
}
</style>

